<template>
	<view class="content" >
	<titleBar :titleText='"分享"' :pageForm='"setting"'></titleBar>
	<view class="top"></view>
	<view class="banner">
		<dl>
			<dt><image src="../../../static/img/logo.png" mode=""></image></dt>
			<dd>{{appName}}</dd>
		</dl>
		<view class="img">
			<image :src="downloadQr" mode=""></image>
		</view>
		<view class="tgtit">推广链接：<text class="tugurl">{{download}}</text></view>
		<view class="sharbuttn">
			<view class="btn" @click="save">保存二维码</view>
			<view class="btn copy-h5" @click="sharurl">复制推广链接</view>
		</view>
		<view class="shartitle"><view>分享</view></view>
		<view class="sharapk" @click="share">
			<view><image src="../../../static/img/share/weact.png"></image></view>
			<view><image src="../../../static/img/share/shar.png"></image></view>
			<view><image src="../../../static/img/share/qq.png"></image></view>
		</view>
		
		<view class="bottom">
			<ul>
				<li>1、好友识别二维码通过手机号进行注册</li>
				<li>2、也可分享此页面到微信或QQ邀请好友注册</li>
				<li>3、注册完成后您即可得到相应的积分</li>
			</ul>
		</view>
	</view>
	
	</view>
</template>

<script>
	import titleBar from '../../../components/customize/titlebar.vue';
	export default {
		components:{
			titleBar
		},
		data(){
			return {
				appName:'',
				appLogo:'',
				downloadQr:'',
				domain:'',
				appSummary:'',
				providerList:[],				
				download: '',		
				type:0,
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
				this.version = plus.runtime.version;
			// #endif
			if(this.$utils.isNotEmpty(this.$store.state.appInfo)){
				debugger
				this.appName = this.$store.state.appInfo.appName;
				this.downloadQr = this.$store.state.appInfo.downloadQr;
				this.download = this.$store.state.appInfo.download;
				this.appLogo = this.$store.state.appInfo.logo;
				this.appSummary = this.$store.state.appInfo.appSummary;
				this.domain = this.$store.state.site_domain;
			}
			uni.getProvider({
				service: 'share',
				success: (e) => {
					let data = [];
					for (let i = 0; i < e.provider.length; i++) {
						switch (e.provider[i]) {
							case 'weixin':
								data.push({
									name: '分享到微信好友',
									id: 'weixin'
								})
								data.push({
									name: '分享到微信朋友圈',
									id: 'weixin',
									type: 'WXSenceTimeline'
								})
								break;
							case 'qq':
								data.push({
									name: '分享到QQ',
									id: 'qq'
								})
								break;
							default:
								break;
						}
					}
					this.providerList = data;
				},
				fail: (e) => {
					console.log('获取登录通道失败'+ JSON.stringify(e));
				}
			});
		},
		methods:{
			//复制分享链接
			sharurl(){
				// #ifdef APP-PLUS
					uni.setClipboardData({
						data: this.download,
						success: function () {
							console.log('success');
							uni.showModal({
								title: '复制成功',
								content: '内容已复制到粘贴板，可前往其他应用粘贴查看。', 
								showCancel:false,
								success: function(res) {
									if (res.confirm) {											 
										//console.log('用户点击确定');
									} else if (res.cancel) {
										//console.log('用户点击取消');
									}
								}
							});
						}
					});
				// #endif


				// #ifdef H5
				this.$utils.handleClipboard(this.download, event, () => {
						uni.showToast({
							icon: 'none',
							title: '内容已复制到粘贴板，可前往其他应用粘贴查看。'
						})
					  }, () => {
						uni.showToast({
							icon: 'none',
							title: '复制失败'
						})
				})
				// #endif
			},
			//保存图片到相册
			save(){
				// #ifdef  APP-PLUS
				uni.saveImageToPhotosAlbum({
					filePath: this.downloadQr,
					success: res=> {
						this.$refs.uToast.show({
							title: '保存成功，可在相册中查看',
							type: 'success',
							position: 'bottom'
						})
					}
				});
				// #endif
				// #ifdef H5
				this.$utils.saveFile(this.downloadQr);
				// #endif
			},
			share(e) {
				if (this.providerList.length === 0) {
					uni.showModal({
						title: '当前环境无分享渠道!',
						showCancel: false
					})
					return;
				}
				let itemList = this.providerList.map(function (value) {
					return value.name
				})
				console.log(itemList)
				uni.showActionSheet({
					itemList: itemList,
					success: (res) => {
						console.log(this.providerList[res.tapIndex].id)
						if(this.providerList[res.tapIndex].id=='qq'){
							this.type=1
						}else{
							this.type=0
						}
						 uni.share({
						 	provider: this.providerList[res.tapIndex].id,
						 	scene: this.providerList[res.tapIndex].type && this.providerList[res.tapIndex].type === 'WXSenceTimeline' ? 'WXSenceTimeline' : "WXSceneSession",
						 	type: this.type,
						 	title: this.appName,
						 	summary: this.appSummary,
						 	imageUrl: this.appLogo,
						 	href:this.domain,
						 	success: (res) => {
						 		console.log("success:" + JSON.stringify(res));
						 	},
						 	fail: (e) => {
						 		uni.showModal({
						 			content: e.errMsg,
						 			showCancel:false
						 		})
						 	}
						 });
					}
				})
			},
			openLink() {
				plus.runtime.openWeb(this.download)
			}
		}
	}
	
	
</script>

<style>
	.tugurl{
		color: #999;
	}
	.sharbuttn{
		display: flex;
		justify-content: center;
	}
	.shartitle{
		    width: 80%;
			text-align: center;
			margin-left: 10%;
			border-bottom: 1px solid #dddddd;
			position: relative;
			height: 60upx;
	}
	.tgtit{
		text-align: center;
	}
	.shartitle view{
		    height: 50upx;
			line-height: 50upx;
			font-size: 28upx;
			color: #999;
			width: 120upx;
			margin: 32upx auto;
			position: absolute;
			background: #fff;
			left: 50%;
			margin-left: -60upx;
	}
	.sharapk{
	 display: flex;
	 justify-content: center;
	 margin: 20upx auto
	}
	.sharapk view{
		margin: 40upx;
	}
	.sharapk view image{
		height: 80upx;
		width: 80upx;
	}
	.content{
		width: 100%;
		background-color: #ffffff;
	}
	.top{
		width: 100%;
		height:400upx;
		background: url(../../../static/img/share/banner.png) no-repeat ;
		background-size:100% ;
		background-position:center center;
	}
	.banner{
		width: 100% ;
		background-color: #FFFFFF;
		border-radius: 60upx 60upx 0 0;
		margin-top: -60upx;
	}
	.banner dl{
		margin-top: -80upx;
	}
	.banner dl dt{
		text-align: center;
	}
	.banner dl dt image{
		width: 160upx;
		height: 160upx;
		border-radius:50% ;
	}
	.banner dl dd{
		text-align: center;
	}
	.banner dl dt uni-image{
		margin-top:-50px;
	}
	.img{
		width: 300upx;
		height: 300upx;
		background-color: red;
		margin: 0 auto;
		margin-top: 60upx;
		margin-bottom: 40upx
	}
	.img image{
		width: 100%;
		height: 100%;
	}
	.btn{
		width: 260upx;
		height: 60upx;
		line-height: 60upx;
		margin: 0 auto;
		margin-top: 60upx;
		border-radius: 40upx;
		border: 0;
		font-size: 26upx;
		outline: 0;
		background: #33b17b;
		color: #FFFFFF;
		text-align: center;
	}
	.bottom{
		width: 100%;
		height: 400upx;
		background-position:left bottom;/* 设置背景图片位置 */
		background-size: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	ul,li{ padding:0;margin:0;list-style:none}
	.bottom ul{
		padding-left: 40upx;
		box-sizing: border-box;
	}
	.bottom ul li{
		width: 100%;
		height: 60upx;
	}
</style>
